<template>
    <div style="padding-bottom:48px;">
        <template v-for='(item1,idx1) in carList.Items'>
            <div class="title">
                <div class="icon_box" @click='checkAll_A(idx1)'>
                    <img src="../../assets/icon/checked.png" v-if='item1.selected'>
                    <img src="../../assets/icon/check.png" v-if='!item1.selected'>
                </div>
                <div class="title_text">{{item1.WareHouseName}}</div>
            </div>
            <template v-for='(item2,idx2) in item1.TimeList'>
                <div class="timeout">
                    <img src="../../assets/icon/shijian.png">
                    <div class="title_text">截单时间 {{item2.ToTime}}</div>
                </div>
                <div class="list_box" v-for='(item3,idx3) in item2.Items'>
                    <div class="checkbox" @click='check(idx1,idx2,idx3)'>
                        <img src="../../assets/icon/checked.png" v-if='item3.selected'>
                        <img src="../../assets/icon/check.png" v-if='!item3.selected'>
                    </div>
                    <img :src="item3.Cover" class="logpic" @click='nav(item3.AgentItemID)'>
                    <div class="content_box" @click='nav(item3.AgentItemID)'>
                        <div class="title_msg">{{item3.Name}}</div>
                        <div class="total_mun1">共{{item3.TotalQty}}件</div>
                        <div class="size_box">
                            <div v-for='(item4,idx4) in item3.colorList'>{{item4.color}}：{{item4.msg}}；</div>
                        </div>
                    </div>
                    <div class="pirce_btn_box">
                        <div class="price_t">￥{{item3.Price}}</div>
                        <button class="btn_r" @click='GetInfo(idx1,idx2,idx3)'>编辑</button>
                    </div>
                </div>
            </template>
        </template>
        <div class="footer_box">
            <div class="footer_icon" @click='ChangeSelectAll'>
                <img src="../../assets/icon/checked.png" v-if='checkAll'>
                <img src="../../assets/icon/check.png" v-if='!checkAll'>
            </div>
            <div class="total_mun">
                <span style="color:#000;font-size:18px;font-weight:bold;">合计:</span>
                <span style="color:#d52831;font-size:18px;font-weight:bold;">￥{{TotalAmount}}</span>
                <span style="font-size:12px;">(不含运费)</span>
            </div>
            <div class="btn_comfire">结算{{TotalCount>0?"(" +TotalCount+")":""}}</div>
        </div>
        <detailChange :fromType='2' :price='Price'  :name='Name' :info='info' :show='show' v-on:listShow='changeShow'></detailChange>
    </div>
</template>

<script>
    import detailChange from '../compontents/detailChange'
    import { Indicator } from 'mint-ui'

    const imgutil = require('../../common/until.js')

    export default {
        name: 'car',
        data () {
            return {
              Price:'',
              Name:'',
              show:false,
              info:{Products:[]}
            }
        },
        created: function () {
            this.$store.dispatch('addCarList')    
        },
        computed:{
            carList(){
              return this.$store.getters.getCarList
            },
            checkAll(){
                if(this.carList.TotalCount > this.TotalCount){
                    return false
                }else{
                    return true
                }
            },
            TotalCount(){
                let cont = 0
                if(this.carList.Items){
                    this.carList.Items.map(item1 => {
                        if(item1.selected){
                            item1.TimeList.map(item2 => {
                                item2.Items.map(item3 => {
                                    if(item3.selected){
                                        cont = cont + item3.TotalQty
                                    }
                                })
                            })
                        }
                    })
                }else{

                }
                
                return cont
            },
            TotalAmount(){
                let total = 0
                if(this.carList.Items){
                    this.carList.Items.map(item1 => {
                        if(item1.selected){
                            item1.TimeList.map(item2 => {
                                item2.Items.map(item3 => {
                                    if(item3.selected){
                                        total = total + Number(item3.Price)*item3.TotalQty
                                    }
                                })
                            })
                        }
                    })
                }else{

                }
                return total.toFixed(2)
            }
        },
        methods: {
            checkAll_A: function(idx1){
                this.carList.Items[idx1].selected = !this.carList.Items[idx1].selected
                this.carList.Items[idx1].TimeList.map(item1 => {
                    item1.Items.map(item2 => {
                        item2.selected = this.carList.Items[idx1].selected 
                    })
                })
            },
            check: function(idx1,idx2,idx3){
                this.carList.Items[idx1].TimeList[idx2].Items[idx3].selected = !this.carList.Items[idx1].TimeList[idx2].Items[idx3].selected
                let countTemp = 0
                this.carList.Items[idx1].TimeList.map(item1 => {
                    item1.Items.map(item2 => {
                        if(item2.selected){
                            countTemp++
                        }
                    })
                })
                if(countTemp < this.carList.Items[idx1].count){
                    this.carList.Items[idx1].selected = false
                }else{
                    this.carList.Items[idx1].selected = true
                }
            },
            changeShow:function(data){
                this.show = false
            },
            GetInfo: function(idx1,idx2,idx3){
                const that = this
                let Products = that.carList.Items[idx1].TimeList[idx2].Items[idx3].Products
                Indicator.open()
                that.Price = that.carList.Items[idx1].TimeList[idx2].Items[idx3].Price
                that.Name = that.carList.Items[idx1].TimeList[idx2].Items[idx3].Name
                that.$http('/pinhuoitem/getinfo',{id:that.carList.Items[idx1].TimeList[idx2].Items[idx3].AgentItemID,typeid:1},function(res){
                    Indicator.close()
                    if(res.Result){
                        res.Data.MainColorPic = imgutil.getUrl(res.Data.MainColorPic,200)
                        res.Data.Products.map(item => {
                            item.ColorPic = imgutil.getUrl(item.ColorPic, 200);
                            item.SizeList.map( item1 => {
                                for(let i = 0;i < Products.length;i++){
                                    if(Products[i].Color == item.Color && Products[i].Size == item1.Size){
                                        item1.qty = Products[i].Qty
                                        break
                                    }else{
                                        item1.qty = 0
                                    }
                                }
                            })
                        })
                        that.info = res.Data
                    }
                },'GET')
                this.show = true
                document.querySelector('body').style.overflow = 'hidden'
            },
            nav: function(id){
                this.$router.push({
                    path: '/itemdetail',
                    query: { id:id}
                })
            },
            ChangeSelectAll: function(){
                if(this.checkAll){
                    if(this.carList.Items){
                        this.carList.Items.map(item1 => {
                            item1.selected = false
                            item1.TimeList.map(item2 => {
                                item2.Items.map(item3 => {
                                    item3.selected = false
                                })
                            })
                        })
                    }
                }else{
                    if(this.carList.Items){
                        this.carList.Items.map(item1 => {
                            item1.selected = true
                            item1.TimeList.map(item2 => {
                                item2.Items.map(item3 => {
                                    item3.selected = true
                                })
                            })
                        })
                    }
                }
            }
        },
        components:{
            detailChange
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .title{width: 100%;height: 40px;line-height: 40px;background-color: #fafafa;overflow:hidden;}
    .icon_box{float: left;;height: 40px;padding: 0 15px;}
    .icon_box img{width: 20px;height: 20px;margin-top: 10px;}
    .title_text{float: left;;height: 40px;line-height: 40px;font-size: 14px;margin-left: 10px;}
    .timeout{width: 100%;height: 40px;line-height: 40px;color: red;font-weight: bold;overflow:hidden;}
    .timeout img{width: 20px;height: 20px;margin: 10px 20px;float: left;}
    .list_box{background:#f5f5f5;padding:15px 3% 12px 0;width:97%;overflow:hidden;margin-bottom:8px;position:relative;}
    .checkbox{width: 12%;height: 84px;float: left;position: relative;text-align: center;}
    .checkbox img{width: 20px;height: 20px;display: inline-block;margin-top: 32px;}
    .logpic{width: 24%;height: 84px;float: left;border-radius: 10px;}
    .content_box{float: right;width: 62%;overflow:hidden;}
    .title_msg{width: 80%;height: 20px;line-height: 20px;font-size: 14px;color: #292929;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;float: left;}
    .total_mun1{float: right;height: 20px;line-height: 20px;font-size: 14px;color: red;}
    .size_box{width: 100%;min-height: 48px;padding: 5px;background-color: #fff;float: left;border-radius: 6px;}
    .pirce_btn_box{padding-top: 10px;padding-left: 12%;width: 88%;float: left;overflow:hidden;}
    .price_t{float: left;color: red;}
    .btn_r{float: right;background-color: #fff;font-size:16px;padding: 5px 10px;outline: none;border-radius: 6px;border: 1px solid #ccc;}
    .footer_box{height: 48px;width: 100%;bottom: 49px;background-color: #f5f5f5;position: fixed;overflow:hidden;}
    .footer_icon{float: left;width: 100%;width: 12%;text-align: center;height: 48px;}
    .footer_icon img{display: inline-block;margin-top: 14px;width: 20px;height: 20px;}
    .total_mun{float: left;height: 48px;line-height: 48px;}
    .btn_comfire{float: right;height: 48px;line-height: 48px;padding: 0 15px;background-color: #d52831;color: #fff;font-size: 14px;}
</style>
